<script setup>
import { ref } from 'vue'
import { requireImg } from '@/utils/common'
import EnterpriseNumber from './EnterpriseNumber.vue'
import EnterpriseOverview from './EnterpriseOverview.vue'
const navbar = ref('上游企业')
const navList = ref([
  {
    title: '上游企业',
    types: [
      {
        type: '材料',
        classify: {
          复核材料轻量化: '<p>暂无</p>'
        }
      },
      {
        type: '硬件组件',
        classify: {
          整机设计:
            '<p>希龙科技（深圳）有限公司、<i>中飞智能制造（深圳）有限公司</i>、深圳兴汇航空科技有限公司、深圳玉龙无人机技术有限公司、深圳市科控通航技术股份有限公司</p>',
          传感器: '<p>暂无</p>',
          电池与动力系统: '<p>暂无</p>'
        }
      },
      {
        type: '软件技术',
        classify: {
          飞控系统: '<p>深圳运飞智能有限公司</p>',
          通信与导航设施: '<p>暂无</p>'
        }
      }
    ],
    children: [
      {
        icon: requireImg('industry/syqy_icon1.png'),
        name: '材料',
        value: 0,
        radio: 0
      },
      {
        icon: requireImg('industry/syqy_icon2.png'),
        name: '硬件组件',
        value: 1,
        radio: 16.67
      },
      {
        icon: requireImg('industry/syqy_icon3.png'),
        name: '软件技术',
        value: 5,
        radio: 83.33
      }
    ]
  },
  {
    title: '中游企业',
    types: [
      {
        type: '总装集成',
        classify: {
          直升机: '<p>暂无</p>',
          无人机:
            '<p>鹍航（深圳）无人机技术有限公司、深圳智航幽浮科技有限公司、希龙科技（深圳）有限公司、中飞智能制造（深圳）有限公司、<i>深圳兴汇航空科技有限公司</i></p>',
          'eVTOL(电动垂直起降飞行器)': '<p>暂无</p>'
        }
      }
    ],
    children: [
      {
        icon: requireImg('industry/zyqy_icon1.png'),
        name: '直升机',
        value: 0,
        radio: 0
      },
      {
        icon: requireImg('industry/zyqy_icon2.png'),
        name: '无人机',
        value: 5,
        radio: 100
      },
      {
        icon: requireImg('industry/zyqy_icon3.png'),
        name: '电动垂直起降飞行器',
        value: 0,
        radio: 0
      }
    ]
  },
  {
    title: '下游企业',
    types: [
      {
        type: '新型基础设施',
        classify: {
          地面系统:
            '<p><i>新联智通（深圳）卫星技术有限公司</i>、星瀚时空（深圳）航天智能科技有限公司</p>',
          通导遥: '<p>星瀚时空（深圳）航天智能科技有限公司</p>',
          起降设施: '<p>暂无</p>',
          空管系统: '<p>暂无</p>'
        }
      },
      {
        type: '运营及服务',
        classify: {
          运营分成:
            '<p><i>深圳市东部通用航空有限公司</i>、<i>鹍航（深圳）国际智能科技有限公司</i>、深圳智航幽浮科技有限公司、深圳运飞智能有限公司、小飞德天通用航空（深圳）有限公司</p>',
          飞行培训:
            '<p>深圳市东部通用航空有限公司、鹍航（深圳）飞行科技有限公司、深圳市智薪科技服务有限公司、智远海外人才服务（深圳）有限公司、深圳市中深力发展科技有限公司、<i>空天有为（深圳）航空发展有限公司</i></p>',
          服务咨询: '<p><i>深圳华旅航空发展有限公司</i></p>',
          整机销售:
            '<p>鹍航（深圳）国际智能科技有限公司、深圳市安飞智能服务有限公司、北斗卫星神州科技（深圳）有限公司、广东亚华通用航空有限公司、北熊智安科技（深圳）有限公司、中飞智能制造（深圳）有限公司、<i>深圳兴汇航空科技有限公司</i>、深圳玉龙无人机技术有限公司</p>'
        }
      },
      {
        type: '空中飞行保障',
        classify: {
          飞行保障: '<p>暂无</p>',
          低空服务平台: '<p><i>工业和信息化部电子第五研究所（赛宝）</i></p>',
          无人机反制: '<p>暂无</p>',
          空中交通管制服务: '<p>暂无</p>'
        }
      },
      {
        type: '应用场景',
        classify: {
          物流: '<p>蒙泰空链科技（深圳）有限责任公司、<i>深圳运飞智能有限公司</i>、北熊智安科技（深圳）有限公司</p>',
          旅游: '<p><i>深圳市东部通用航空有限公司</i>、鹍航（深圳）国际智能科技有限公司、深圳智航幽浮科技有限公司、深圳运飞智能有限公司、小飞德天通用航空（深圳）有限公司、深圳鸿鹄通用航空有限公司</p>',
          '农业植保、应急救援、巡检、消防': '<p><i>深圳玉龙无人机技术有限公司</i></p>',
          智慧城市: '<p>暂无</p>'
        }
      }
    ],
    children: [
      {
        icon: requireImg('industry/xyqy_icon1.png'),
        name: '基础设施',
        value: 3,
        radio: 5
      },
      {
        icon: requireImg('industry/xyqy_icon2.png'),
        name: '运营及服务',
        value: 20,
        radio: 37
      },
      {
        icon: requireImg('industry/xyqy_icon3.png'),
        name: '空中飞行保障',
        value: 1,
        radio: 1.8
      },
      {
        icon: requireImg('industry/xyqy_icon4.png'),
        name: '应用场景',
        value: 10,
        radio: 18.5
      }
    ]
  }
])

//选择分类
const enterpriseNumber = ref(null)
const enterpriseOverview = ref(null)
const choseItem = (item) => {
  navbar.value = item.title
  enterpriseNumber.value.setData(item.title, item.children)
  enterpriseOverview.value.setData(item.title, item.types)
}
</script>

<template>
  <div class="industry">
    <transition
      appear
      name="custom-classes-transition"
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
    >
      <div class="top">
        <ul v-for="(item, index) in navList" :key="index" @click="choseItem(item)">
          <p class="title" :class="{ active: navbar == item.title }">
            <span>{{ item.title }}</span>
          </p>
          <li :class="{ active: navbar == item.title }">
            <p v-for="(item02, index02) in item.children" :key="index02">
              <img :src="item02.icon" alt="" />
              <span>{{ item02.name }}</span>
            </p>
          </li>
        </ul>
      </div>
    </transition>

    <div class="bottom">
      <EnterpriseNumber ref="enterpriseNumber" />
      <EnterpriseOverview ref="enterpriseOverview" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.industry {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: url('@img/industry/industry_bg.png');
  background-size: cover;

  .top {
    width: 1000px;
    margin: 100px auto 0;
    display: flex;
    justify-content: space-between;

    ul {
      .title {
        width: 218px;
        height: 70px;
        background: url('@img/industry/nav_bg.png');
        text-align: center;
        line-height: 70px;
        background-size: 100% 100%;

        &.active {
          background: url('@img/industry/nav_bg_active.png');
          background-size: 100% 100%;
        }

        span {
          opacity: 0.7;
          font-size: 24px;
          font-weight: bold;
          background: linear-gradient(180deg, #eeeeee 20%, #bff2f2 36%, #40f4ff 79%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          text-fill-color: transparent;
          cursor: pointer;
        }
      }
      li {
        width: 216px;
        // height: 142px;
        background: 2px url('@img/industry/item_bg.png') no-repeat;
        background-size: 100% 100%;
        margin-top: -25px;
        padding-top: 35px;
        font-size: 16px;
        padding-bottom: 10px;

        &.active {
          background: 2px url('@img/industry/item_bg_active.png') no-repeat;
          background-size: 100% 100%;
        }

        p {
          text-align: center;
          padding: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          img {
            height: 20px;
            vertical-align: middle;
            margin-right: 5px;
          }
        }
      }
    }
  }

  .bottom {
    width: 1184px;
    position: absolute;
    left: 50%;
    margin-left: -592px;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
